<template>
	<!-- 
	注意
		<up-picker>本项目使用的uview-plus版本为3.4.97,需要更改框架中的inputPropsInner,否者会报警告
	 -->
	<view class="main-box">
		<!-- 注意，
		如果需要兼容微信小程序，最好通过setRules方法设置rules规则
		up-picker-data没有inputProps属性设置输入框样式，需要自己去组件内加
		 -->
		<!-- 表单 -->
		<up-form class="form-box" :model="form" :borderBottom="true" ref="uFormRef"
			labelWidth="auto">
			<up-form-item @click="" ref="nameRef" label="客户" prop="customerSeleted"
				:borderBottom="true" required>
				<!-- <up-picker style="margin-left: auto;width: 100%;" @confirm="(e)=>{
					console.log(e)
				}" :inputProps="{inputAlign:'right',border:'none'}" keyName="label" valueName="id"
					v-model="form.customerSeleted" :columns="customers" :closeOnClickOverlay="true"
					hasInput></up-picker> -->
				<up-picker-data style="width: 100%;"
					:inputProps="{inputAlign:'right',border:'none'}" labelKey="label" valueKey="id"
					v-model="form.customerSeleted" :options="customers" :closeOnClickOverlay="true"
					hasInput></up-picker-data>
				<template #right>
					<up-icon name="arrow-right"></up-icon>
				</template>
			</up-form-item>
			<up-form-item label="销售仓库" prop="salesWarehouseSeleted" :borderBottom="true" required>
				<!-- <up-picker style="margin-left: auto;width: 100%;"
					:inputProps="{inputAlign:'right',border:'none'}" keyName="label" valueName="id"
					v-model="form.salesWarehouseSeleted" :columns="salesWarehouses"
					:closeOnClickOverlay="true" hasInput></up-picker> -->
				<up-picker-data style="width: 100%;"
					:inputProps="{inputAlign:'right',border:'none'}" labelKey="label" valueKey="id"
					v-model="form.salesWarehouseSeleted" :options="salesWarehouses"
					:closeOnClickOverlay="true" hasInput></up-picker-data>
				<template #right>
					<up-icon name="arrow-right"></up-icon>
				</template>
			</up-form-item>
			<view v-show="fillMoreShow">
				<up-form-item label="送货司机" prop="deliveryDriverSeleted" :borderBottom="true">
					<up-picker style="margin-left: auto;width: 100%;"
						:inputProps="{inputAlign:'right',border:'none'}" keyName="label"
						valueName="id" v-model="form.deliveryDriverSeleted"
						:columns="deliveryDrivers" :closeOnClickOverlay="true" hasInput></up-picker>
					<template #right>
						<up-icon name="arrow-right"></up-icon>
					</template>
				</up-form-item>
				<up-form-item label="业务员" prop="salespersonSeleted" :borderBottom="true">
					<up-picker style="margin-left: auto;width: 100%;"
						:inputProps="{inputAlign:'right',border:'none',placeholder:'不填写默认为当前账号'}"
						keyName="label" valueName="id" v-model="form.salespersonSeleted"
						:columns="salespersons" :closeOnClickOverlay="true" hasInput></up-picker>
					<template #right>
						<up-icon name="arrow-right"></up-icon>
					</template>
				</up-form-item>
				<up-form-item label="部门" prop="departmentSeleted" :borderBottom="true">
					<up-picker style="margin-left: auto;width: 100%;"
						:inputProps="{inputAlign:'right',border:'none'}" keyName="label"
						valueName="id" v-model="form.departmentSeleted" :columns="departments"
						:closeOnClickOverlay="true" hasInput></up-picker>
					<template #right>
						<up-icon name="arrow-right"></up-icon>
					</template>
				</up-form-item>
				<up-form-item label="上传附件" prop="attachments" :borderBottom="true">
					<up-input v-model="form.attachments" readonly placeholder="点击上传文件" border="none"
						inputAlign="right" suffixIcon="file-text" />
				</up-form-item>
			</view>
			<view @click="fillMoreShow = !fillMoreShow"
				style="display: flex;justify-content: center;padding: 30rpx 0;">
				<up-icon labelPos="left" :label="fillMoreShow?'收起更多':'展示更多'"
					:name="fillMoreShow?'arrow-up':'arrow-down'" class="right"></up-icon>
			</view>
		</up-form>

		<!-- 在Vue中，可以通过改变key属性来强制重新渲染组件 -->
		<!-- <up-picker :key="picker_cur" keyName="label" valueName="id"
			v-model="pickerSelected[picker_cur]" :show="pickerShow"
			:columns="pickerData[picker_cur]" @confirm="customerConfirm"
			@cancel="pickerShow = false;" @close="pickerShow = false;"
			:closeOnClickOverlay="true"></up-picker> -->

		<!-- 搜索 加商品 -->
		<view class="search-box">
			<up-search @click="toSearchPage()" shape="square" placeholder="首拼/名称/编号/条码"
				:clearabled="true" :showAction="false" height="64rpx" disabled></up-search>
			<up-button
				:customStyle="{width:'120rpx',height:'64rpx',marginLeft:'10rpx',color:'#3c9cff'}"
				color="#ebf3fe" text="扫码"></up-button>
			<up-button @click="toProductPage"
				:customStyle="{width:'120rpx',height:'64rpx',marginLeft:'10rpx',color:'#3c9cff'}"
				color="#ebf3fe" text="加商品"></up-button>
		</view>

		<view>
			<view class="header"
				style="font-size: 28rpx;font-weight: 300;background-color: #e3e8fb;padding: 20rpx;display: flex;width: 100%;">
				<view style="flex:1">商品</view>
				<view style="width:140rpx">销售价</view>
				<view style="width:180rpx">数量/小计</view>
			</view>
			<view class="body">
				<view class="row" style="background-color: #ffffff;" v-for="(item,index) in 10">
					<view style="display: flex;padding: 20rpx 20rpx 0 20rpx;width: 100%;">
						<view style="flex:1">
							<view style="font-size: 24rpx;">
								<text
									style="color: #3c9cff;padding: 4rpx 16rpx;background-color: #edf0f9;">1</text>
								<text
									style="font-weight: bold;font-size: 30rpx;margin-left: 10rpx;">哇哈哈</text>
							</view>
							<view style="font-size: 24rpx;padding: 6rpx 0;">
								<text>3箱1瓶</text>
								<text style="margin-left: 10rpx;">1箱=12瓶</text>
							</view>
						</view>
						<view style="width:140rpx">25</view>
						<view style="width:180rpx">
							<view style="font-weight: bold;font-size: 30rpx;">
								2箱
							</view>
							<view style="font-size: 24rpx;font-weight: bold;color: #3c9cff;">
								￥520.00
							</view>
						</view>
					</view>
					<view style="display: flex;padding: 20rpx;" v-show="index==1">
						<button
							style="display: flex;align-items: center; border-radius: 50rpx;padding: 0 20rpx;margin-left: 0;background-color: #f3f2f7;"
							size="mini">
							<text>￥260/箱</text>
							<up-icon name="arrow-down-fill" style="margin-left: 20rpx;"></up-icon>
						</button>
						<up-number-box buttonSize="25" buttonWidth="25"></up-number-box>
					</view>
				</view>
				<!-- <up-empty mode="data" icon="data"></up-empty> -->
			</view>
		</view>



		<!-- rowStyle属性设置行高没有用 -->
		<!-- <u-table2 :data="tableData" :columns="columnsStyle" rowHeight="96rpx"
			:cellStyle="cellStyleFunc">
			<template #cell="scope">
				<view v-show="scope.column.key == 'product'">
					<view style="font-size: 24rpx;padding: 6rpx 10rpx;">
						<text
							style="color: #3c9cff;padding: 4rpx 16rpx;background-color: #edf0f9;">{{scope.rowIndex + 1}}</text>
						<text
							style="font-weight: bold;font-size: 30rpx;margin-left: 10rpx;">{{scope.row.product}}</text>
					</view>
					<view style="font-size: 24rpx;padding: 6rpx 10rpx;">
						<text>3箱1瓶</text>
						<text style="margin-left: 10rpx;">1箱=12瓶</text>
					</view>
				</view>
				<view v-show="scope.column.key == 'price'">
					{{scope.row.price}}
				</view>
				<view v-show="scope.column.key == 'count'">
					<view style="font-weight: bold;font-size: 30rpx;margin-left: 10rpx;">
						{{scope.row.count}}箱
					</view>
					<view
						style="font-size: 24rpx;padding: 6rpx 10rpx;font-weight: bold;color: #3c9cff;">
						￥520.00
					</view>
				</view>
			</template>
		</u-table2> -->


		<view class="bottom-box">
			<view style="display: flex;padding: 20rpx 20rpx 0 20rpx;">
				<view style="display: flex;align-items: center;">
					<text>整单优惠</text>
					<up-input :customStyle="{height:'30rpx',width:'120rpx',marginLeft:'10rpx'}"
						placeholder="" border="surround" type="number"></up-input>
				</view>
				<view style="margin-left: auto;">
					<text>合计：</text>
					<text style="font-size: 48rpx;color:#C06E5D;font-weight: bold;">￥520.00</text>
				</view>
			</view>
			<view style="padding: 20rpx;">
				<up-button type="primary" @click="submitForm">提交</up-button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, reactive, watch } from 'vue'
	import { onReady, onLoad } from "@dcloudio/uni-app"
	const app = getApp()
	const cellStyleFunc = (scope) => {
		// console.log(scope)
		// if (scope.column.key == 'product' && scope.row.id == '1') {
		// 	// return {
		// 	// 	background: 'blue',
		// 	// 	color: 'yellow'
		// 	// }
		// } else {
		// 	return {}
		// }
	}
	onLoad(async () => {
		// 客户
		const res = await app.globalData.http.get("/wms/customer/list")
	})
	const columnsStyle = ref([{
			title: '商品',
			key: 'product',
			style: {
				'background': '#e3e8fb',
				'width': 'auto',
				'line-height': '0.5',
				'font-weight': '300'
			},
		},
		{
			title: '销售价',
			key: 'price',
			width: '50px',
			style: {
				'background': '#e3e8fb',
				'line-height': '0.5',
				'font-weight': '300'
			},
		},
		{
			title: '数量/小计',
			key: 'count',
			width: '70px',
			style: {
				'background': '#e3e8fb',
				'justify-content': 'center',
				'line-height': '0.5',
				'font-weight': '300'
			},
		}
	])
	const tableData = ref([
		{ id: 1, product: '哇哈哈', price: 25, count: 2 },
		{ id: 2, product: '宋柚汁', price: 30, count: 2 },
		{ id: 2, product: '宋柚汁', price: 30, count: 2 },
		{ id: 2, product: '宋柚汁', price: 30, count: 2 },
		{ id: 2, product: '宋柚汁', price: 30, count: 2 },
		{ id: 2, product: '宋柚汁', price: 30, count: 2 },
		{ id: 2, product: '宋柚汁', price: 30, count: 2 },
		{ id: 2, product: '宋柚汁', price: 30, count: 2 },
		{ id: 2, product: '宋柚汁', price: 30, count: 2 },
		{ id: 2, product: '宋柚汁', price: 30, count: 2 },
		{ id: 2, product: '宋柚汁', price: 30, count: 2 },
		{ id: 2, product: '宋柚汁', price: 30, count: 2 },
		{ id: 2, product: '宋柚汁', price: 30, count: 2 },
		{ id: 2, product: '宋柚汁', price: 30, count: 2 },
		{ id: 2, product: '宋柚汁', price: 30, count: 2 },
		{ id: 2, product: '宋柚汁', price: 30, count: 2 },
		{ id: 2, product: '宋柚汁', price: 30, count: 2 }
	])
	// 车销订单表单数据
	const form = ref({
		// 客户
		customerSeleted: null,

		// 销售仓库
		salesWarehouseSeleted: null,

		// 送货司机
		deliveryDriverSeleted: [],

		// 业务员
		salespersonSeleted: [], // 不填写默认为当前登录人

		// 部门
		departmentSeleted: [], // 不填写默认为当前登录人部门

		// 上传附件
		attachments: "",

		// 商品列表
		products: [],

		// 整单优惠金额
		discountAmount: '',

		// 合计金额
		totalAmount: 0.00
	})
	const fillMoreShow = ref(false);

	// picker相关
	const customers = ref(
		[{
				label: '红玉家常菜馆1',
				id: 2021
			},
			{
				label: '红玉家常菜馆2',
				id: 804
			},
			{
				label: '红玉家常菜馆3',
				id: 11
			}
		]
	)
	const salesWarehouses = ref(
		[{
				label: '仓库1',
				id: 1
			},
			{
				label: '仓库2',
				id: 2
			},
			{
				label: '仓库3',
				id: 3
			}
		]
	)
	const deliveryDrivers = ref([
		[{
				label: '司机1',
				id: 1
			},
			{
				label: '司机2',
				id: 2
			},
			{
				label: '司机3',
				id: 3
			}
		]
	])
	const salespersons = ref([
		[{
				label: '业务员1',
				id: 1
			},
			{
				label: '业务员2',
				id: 2
			},
			{
				label: '业务员3',
				id: 3
			}
		]
	])
	const departments = ref([
		[{
				label: '部门1',
				id: 1
			},
			{
				label: '部门2',
				id: 2
			},
			{
				label: '部门3',
				id: 3
			}
		]
	])

	const toSearchPage = (index) => {
		uni.navigateTo({
			url: '/pages/searchPage'
		})
	}

	// 校验规则  
	/* {
			required: true,
			type: 'array',
			len: 1,
			message: '请输入手机号',
			trigger: ['change', 'blur'],
		},*/
	const rules = ref({
		customerSeleted: [{
			required: true,
			type: 'number',
			message: '请选择客户',
			trigger: ['change', 'blur'],
		}],
		salesWarehouseSeleted: [{
			required: true,
			type: 'number',
			message: '请选择仓库',
			trigger: ['change', 'blur'],
		}]
	})


	// 表单引用  
	const uFormRef = ref(null);

	// 页面生命周期
	onReady(() => {
		// 如果需要兼容微信小程序，最好通过setRules方法设置rules规则
		uFormRef.value.setRules(rules.value)
	})

	// 监听 form.number 的变化解决picker第一次选择后不触发form的表单校验的bug
	watch(() => form.value.customerSeleted, (newVal, oldVal) => {
		console.log(`Number changed from ${oldVal} to ${newVal}`);
		if (oldVal == null) { // 只执行一次
			if (uFormRef.value) {
				uFormRef.value.validateField('customerSeleted');
			}
		}
	});
	watch(() => form.value.salesWarehouseSeleted, (newVal, oldVal) => {
		console.log(`Number changed from ${oldVal} to ${newVal}`);
		if (oldVal == null) { // 只执行一次
			if (uFormRef.value) {
				uFormRef.value.validateField('salesWarehouseSeleted');
			}
		}
	});

	const toProductPage = () => {
		uni.navigateTo({
			url: `/pages/addProduct`
		})
	}
	// 提交方法  
	const submitForm = () => {
		//console.log(form.value)
		uFormRef.value.validate().then(valid => {
			if (valid) {
				uni.$u.toast('校验通过')
			} else {
				uni.$u.toast('校验失败')
			}
		}).catch(() => {
			// 处理验证错误  
			uni.$u.toast('校验失败')
		});
	}
</script>

<style lang="scss" scoped>
	.form-box {
		padding: 0 20rpx;
		background-color: #ffffff;
	}

	.search-box {
		display: flex;
		margin: 20rpx 0;
		padding: 20rpx;
		background-color: #ffffff;
	}

	.bottom-box {
		background-color: #ffffff;
		// height: 100rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 998;
		box-sizing: content-box;
		border-top: 1px solid #dedede;
		padding-bottom: env(safe-area-inset-bottom);
	}
</style>